<template>
  <header class="headerBox">
    <div class="headerTitle">代码编辑器</div>
    <div>
      <el-button type="primary" @click="exportJson">导出</el-button>
      <ImportJson></ImportJson>
      <Create></Create>
      <el-button type="primary" @click="dragStore.allReset">重置</el-button>
    </div>
  </header>
</template>
<script setup lang="ts">
import Create from "./header_compt/create.vue";
import ImportJson from "./header_compt/importJson.vue";
import { useDrag } from "@/store/modules/drag";
const dragStore = useDrag();
function exportJson() {
  let a = document.createElement("a");
  a.href = "data:text/plain;charset=utf-8," + JSON.stringify(dragStore.renderData);
  a.download = "JSON下载";
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}
</script>
<style lang="scss" scoped>
.headerBox {
  background: #fff;
  padding: 10px 30px;
  display: flex;
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgb(223, 207, 207);
  .headerTitle {
    font-size: 14px;
  }
}
</style>
